<template>
    <div class="LineWork_div" >
        <div class="LineWork_top">
            <div class="LineWork_top_ico_div" @click="jumpBack()" >
                <a-icon type="arrow-left" class="LineWork_top_ico" theme="outlined" />
            </div>
            <div class="LineWork_top_menu">计划详情</div>
            <div class="LineWork_top_menu_refresh" >
                <a-icon type="sync" class="LineWork_top_ico" theme="outlined" :class="[rotate?'go':'aa']"  @click="refresh" clickMusic='true'/>
            </div>
        </div>
        <div class="LineWork_content" >
            <div class="LW_time_div" style="font-size: 6vw;text-align: center">
                计划日期：{{startTime}}
                <!--<Col span="24">
                    <date-picker id="date_picker1" ref="data_picker1" @focus="inputNone" placement="right-start" class="LW_time_chooseTime1" type="datetime"
                                 v-model="startTime" placeholder="开始时间" :options="startTimeOption"  @on-change="onStartTimeChange"></date-picker>
                </Col>-->
               <!-- <Col span="11">
                    <date-picker id="date_picker1" onfocus="this.blur ()" placement="right-start" class="LW_time_chooseTime1" type="datetime"
                                 v-model="startTime" placeholder="开始时间" :options="startTimeOption"  @on-change="onStartTimeChange"></date-picker>
                </Col>
                <Col span="2">
                    至
                </Col>
                <Col span="11">
                    <date-picker placement="right-start"  class="LW_time_chooseTime2" type="datetime" v-model="endTime" placeholder="结束时间"
                                 :options="endTimeOption" @on-change="onEndTimeChange"></date-picker>
                </Col>-->
                <!--<Col span="3" class="LW_time_search" @click="search()" >查询</Col>-->
            </div>
            <div class="tab_div" v-loading="loading">
                <a-tabs  v-model="lineWorkTagKey" defaultActiveKey="1" @change="getTabChange" >
                    <a-tab-pane tab="进行中" key="1">
                        <ul class="LW_ul" v-scroll="onScroll"><!--@click="$router.push({name:'lineWorkSurePlan',params:{id:doingPlan.id,key:'1'}})"-->
                            <li class="LW_li" v-for="doingPlan in doingPlans" @click="jumpDoingRouter(doingPlan.id,doingPlan.currentStep.sort)">
                                <div class="LW_li_ico">
                                    <div class="triangle"></div>
                                </div>
                                <div class="LW_li_right">
                                    <div class="LW_work_title">
                                        {{doingPlan.title | ellipsis1}}
                                    </div>
                                    <div class="LW_work_desc">
                                        {{doingPlan.addres | ellipsis2}}
                                    </div>
                                    <div class="LW_workState_userName" >
                                        <div class="LW_workState_userName_left">
                                            {{doingPlan.currentStep.name}}
                                        </div>
                                        <div class="LW_workState_userName_right">
                                            {{doingPlan.leaderName |showName}}
                                        </div>
                                    </div>
                                    <!--<div class="LW_workState_userName2" >
                                        <div class="LW_workState_userName_right2">
                                            {{doingPlan.leaderName}}
                                        </div>
                                    </div>-->
                                    <div class="LW_line_time">
                                        <div class="LW_line_time_left">
                                            <Icon type="ios-leaf-outline" />{{doingPlan.planDetail.编制单位}}
                                        </div>
                                        <div class="LW_line_time_right">
                                            {{doingPlan.planDetail.作业日期}} {{doingPlan.planDetail.作业时段}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </a-tab-pane>

                    <!--------------------未开始Tab-------------------->
                    <a-tab-pane tab="未开始" key="2" forceRender >
                        <ul class="LW_ul" v-scroll="onScroll">
                            <li class="LW_li" @click="$router.push({name:'lineWorkSurePlan',params:{id:readyPlan.id,key:'2'}})" v-for="readyPlan in readyPlans" >
                                <div class="LW_li_ico">
                                    <div class="triangle"></div>
                                </div>
                                <div class="LW_li_right">
                                    <div class="LW_work_title">
                                        {{readyPlan.title | ellipsis1}}
                                    </div>

                                    <div class="LW_work_desc">
                                        {{readyPlan.addres | ellipsis2}}
                                    </div>

                                    <div class="LW_workState_userName">
                                        <div class="LW_workState_userName_left LW_workState_userName_left_key2">
                                            {{readyPlan.planDetail.计划状态}}
                                        </div>
                                        <div class="LW_line_name">
                                            {{readyPlan.planDetail.线名 }}{{readyPlan.planDetail.作业位置}}
                                            {{readyPlan.planDetail.带班人 |showName}}
                                        </div>
                                        <!--<div class="LW_workState_userName_right" v-if="readyPlan.leaderName.length<14">
                                            {{readyPlan.leaderName}}
                                        </div>
                                        <div class="LW_workState_userName_right_2" v-else-if="readyPlan.leaderName.length>13">
                                            {{readyPlan.leaderName}}
                                        </div>-->
                                    </div>
                                    <!--<div class="LW_workState_userName2" v-if="readyPlan.leaderName">
                                        <div class="LW_workState_userName_right2">
                                            {{readyPlan.leaderName}}
                                        </div>
                                    </div>-->
                                    <div class="LW_line_time">
                                        <div class="LW_line_time_left">
                                            <Icon type="ios-leaf-outline" />{{readyPlan.planDetail.编制单位}}
                                        </div>
                                        <div class="LW_line_time_right">
                                            {{readyPlan.planDetail.作业日期}} {{readyPlan.planDetail.作业时段}}
                                        </div>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </a-tab-pane>

                    <!--------------------已完成Tab-------------------->
                    <a-tab-pane tab="已完成" key="3" >
                        <ul class="LW_ul" v-scroll="onScroll">
                            <li class="LW_li" v-for="finishPlan in finishPlans" @click="$router.push({name:'lineWorkSurePlan',params:{id:finishPlan.id,key:'3'}})">
                                <div class="LW_li_ico">
                                    <div class="triangle"></div>
                                </div>
                                <div class="LW_li_right">
                                    <div class="LW_work_title">
                                        {{finishPlan.title | ellipsis1}}
                                    </div>
                                    <div class="LW_work_desc">
                                        {{finishPlan.addres | ellipsis2}}
                                    </div>
                                    <div class="LW_workState_userName">
                                        <div class="LW_finish_div">
                                            <div class="LW_circle">1</div>
                                            <div class="LW_finish_feedback">已完成</div>
                                        </div>
                                        <div class="LW_line_name_key3">
                                            {{finishPlan.planDetail.线名}}{{finishPlan.planDetail.作业位置}}
                                            {{finishPlan.planDetail.带班人 | showName}}
                                        </div>
                                    </div>
                                    <!--<div class="LW_workState_userName2" >
                                        <div class="LW_workState_userName_right2">
                                            {{finishPlan.planDetail.带班人 | showName}}
                                        </div>
                                    </div>-->
                                    <div class="LW_line_time">
                                        <div class="LW_line_time_left">
                                            <Icon type="ios-leaf-outline" />{{finishPlan.planDetail.编制单位}}
                                        </div>
                                        <div class="LW_line_time_right">
                                            {{finishPlan.planDetail.作业日期 }} {{finishPlan.planDetail.作业时段}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>

    </div>
</template>
<style>
    .LineWork_div{
        width: 100vw;
    }
    .LineWork_top{
        margin: 0;
        width: 100vw;
        height: 8vh;
        line-height: 8vh;
        background: #101010 100%;

    }
    .LineWork_top_menu{
        float: left;
        height: 8vh;
        width: 68vw;
        line-height: 8vh;
        color: white;
        font-size: 6vw;
        text-align: center;
        generic-family:SourceHanSansSC-regular;

    }
    .LineWork_top_menu_refresh{
        float: left;
        width: 16vw;
        height: 8vh;
        color: white;
    }
    .LineWork_top_ico_div{
        float: left;
        margin: 0;
        padding: 0;
        width: 16vw;
        height: 8vh;
        line-height: 7.8vh;
        font-size: 4vw;
        text-align: center;
    }
    .LineWork_top_ico{
        font-size: 7vw;
        color: white;
        margin: 3.5vw 0 0 0;

    }
    .LineWork_content{
        width: 100vw;
        height: 92vh;
        generic-family:Roboto;
        font-weight: normal;
    }
    .LW_time_div{
        width: 100vw;
        height: 7.3vh;
        line-height:  7.3vh;
        float: left;
        text-align: center;
    }
    .tab_div{
        width: 100vw;
        height: 84.7vh;
        float: left;
    }


    .LW_time_search{
        font-size: 5vw;
        font-weight: bold;
        line-height: 13vw;
        height: 13vw;
    }
    .ant-tabs-bar{
        /*消除选项卡下滑到底超出高度*/
        margin: 0;
    }
    .LW_ul{
        width: 100vw;
        height: 76.7vh;
        overflow: scroll;
        padding: 0;
    }
    .LW_li{
        width: 100vw;
        float: left;
        list-style: none;
        padding: 0 2vw 2vw  2vw;
        border-bottom: 0.3vw dotted grey;
        margin:0 0 2vw 0;
    }
    .LW_li_ico{
        width: 8vw;
        float: left;
        padding-top: 2vw;

    }
    .LW_li_right{
        width: 88vw;
        float: right;
    }
    .triangle{
        width: 0;
        height: 0;
        border-bottom: 7vw solid rgb(19, 163, 224);
        border-left: 7vw solid transparent;

    }
    .LW_work_title{
        width: 88vw;
        font-size: 6vw;
        font-weight: bold;
        text-align: left;
        generic-family:Microsoft YaHei;
        padding: 0 2vw 0 2vw ;
    }
    .LW_work_desc{
        padding: 0;
        width: 100%;
        generic-family:Microsoft YaHei;
        font-size: 5vw;
        font-weight: bold;
        text-align: left;
        float: left;
    }
    .LW_workState_userName{
        width: 100%;
        height: 10vw;
        line-height: 10vw;
        generic-family:Microsoft YaHei;
        font-size: 5vw;
        font-weight: bold;
        text-align: left;
        float: left;
        margin:0;
    }
    .LW_workState_userName2{
        width: 100%;
        height: 10vw;
        line-height: 10vw;
        generic-family:Microsoft YaHei;
        font-size: 4.5vw;
        font-weight: bold;
        text-align: left;
        float: left;
    }

    .LW_workState_userName_left{
        width: 35%;
        font-size: 5.5vw;
        font-weight: bold;
        text-align: left;
        float: left;
        color: red;
    }
    .LW_workState_userName_right{
        width: 65%;
        font-size: 5.5vw;
        font-weight: bold;
        text-align: left;
        float: left;
        color: rgb(40, 40, 40);
    }
    .LW_workState_userName_left_key2{
        width: 30% !important;
        text-align: left;
        float: left;
        height: 12vw;
        line-height: 12vw;

    }
    .LW_line_name{
        width: 70% !important;
        height: 12vw;
        text-align: left;
        font-size:4vw ;
        line-height: 10vw;
        color: grey;
        float: left;
        font-weight: normal;
    }
    .LW_line_time{
        width: 100%;
        font-size: 4vw;
        min-height:12vw ;
        float: left;
    }
    .LW_line_time_left{
        width: 50%;
        float: left;
        text-align: left;
        color: grey;
    }
    .LW_line_time_right{
        width: 50%;
        float: right;
        text-align: left;
        color: grey;
    }
    .LW_circle{
        margin-top: 2.5vw;
        width:7vw;
        height: 7vw;
        line-height: 7vw;
        background: #00b7ff;
        -moz-border-radius: 3.5vw;
        -webkit-border-radius: 3.5vw;
        border-radius:3.5vw;
        color: white;
        text-align: center;
        font-weight: normal;
        float: left;
    }
    .LW_finish_div{
        width: 30vw;
        height:12vw ;
        line-height: 12vw;
        float: left;
    }
    .LW_finish_feedback{
        width: 23vw;
        height: 12vw;
        line-height: 12vw;
        color: grey;
        font-size: 5vw;
        font-weight: bold;
        float: left;
    }
    .LW_line_name_key3{
        width: 50vw;
        height: 12vw;
        line-height: 12vw;
        color: grey;
        font-size: 4vw;
        font-weight: normal;
        float: left;

    }
</style>
<script>
    import axios from  'axios'
    export default {
        name: "LineWorkComponent",
        components:{},
        inject:['reload'],
        mounted() {
            this.getPlan();
            this.workModeSet();
            this.onStartTimeChange(this.startTime);
            this.onEndTimeChange(this.endTime);
            this.initData();
        },
        data() {
            return {
                startTime: '',
                endTime: '',
                startTimeOption: {},
                endTimeOption: {},
                lineWorkTagKey:this.$store.state.lineWorkTagKey,
                doingPlans:null,
                readyPlans:null,
                finishPlans:null,
                includedComponents: "lineWorkComponent",
                lineWorkUrl:'',//针对进行中任务选择跳转路由
                loading: true,
                rotate:false,

            }
        },
        methods: {
            /*inputNone() {     //禁止输入框弹出默认键盘
                document.activeElement.blur();
                console.log("focus...");
            },*/
            refresh(){
                let me = this;
                me.clickButton();
                me.rotate=!me.rotate;
                setTimeout(function() {
                    me.reload();
                },1000)
            },
            jumpBack(){
                this.clickButton();
              this.$router.push('/homework');
            },
            trimNumber(str) {
                //消除数字 已完成计划带班人
                return str.replace(/\d+/g, ' ').split(' ')[0];
            },
            initData(){
                let that = this;
                let date=new Date();
                let newDate=date.toLocaleDateString();   //获取24小时制，中国时间，打印出   2019/01/03/
                /*let before = new RegExp( '/' , "g" )
                let newStr = newDate.replace( before , ':' );
                let after1 = " 00:00:00";
                let after2 = " 23:59:59";*/

                that.startTime = newDate;
                /*that.endTime = newStr+after2;*/
                that.onStartTimeChange(that.startTime);
                /*that.onEndTimeChange(that.endTime);*/

            },
            /**
             * 开始时间发生变化时触发,设置结束时间不可选择的日期
             * 结束时间应大于等于开始时间,且小于等于当前时间
             * @param {string} startTime 格式化后的日期
             * @param {string} type 当前的日期类型, type
             */
            onStartTimeChange(startTime) {
                this.endTimeOption = {
                    disabledDate(endTime) {
                        return endTime < new Date(startTime) || endTime > Date.now()
                    }
                }
            },
            /**
             * 结束时间发生变化时触发,设置开始时间不可选择的日期
             * 开始时间小于等于结束时间,且小于等于当前时间
             * @param {string} date 格式化后的日期
             * @param {string} type 当前的日期类型, type
             */
            onEndTimeChange(endTime) {
                this.startTimeOption = {
                    disabledDate(startTime) {
                        return startTime > new Date(endTime) || startTime > Date.now()
                    }
                }
            },
            onScroll(){
                this.handleScroll;
            },
            getTabChange(targetKey){
                this.clickButton();
                this.$store.commit('updateLineWorkTagKey',targetKey);

            },
            getPlan(){
                let that = this;
                //进入线路作业后，得到线路作业的id和名称，更新当前工作模式的id和名称
                let lineWorkModeId = localStorage.getItem("lineWorkModeId")?localStorage.getItem("lineWorkModeId"):localStorage.getItem("workModeId");
                localStorage.setItem("workModeId",lineWorkModeId);
                that.$api.getPlans().then(resp=>{
                    //状态码200
                    if(resp.status === 200){
                        //let otherFailSendInfo = failSendInfo.filter(item=>item.UserId!==UserId);//其余的失败信息集合*/
                        that.readyPlans = resp.data.result.filter(item=>!item.isStarted);//未开始
                        that.doingPlans = resp.data.result.filter(item=>item.isStarted&&!item.isFinished);//进行中
                        that.finishPlans = resp.data.result.filter(item=>item.isFinished);//已完成

                        that.loading = false;
                        /*console.log(that.readyPlans);
                        console.log(that.doingPlans);
                        console.log(that.finishPlans);*/

                    }
                }).catch(error=>{
                    //请求失败
                    console.log("init plan failed:"+error);

                })
            },
            search () {//刷新当前路由并可返回
                console.log("search ()")
            },
            jumpDoingRouter(id,sort){
                //根据进行中任务的完成步骤，跳转到对应的路由
                let n = parseInt(sort);
                switch(n)
                {
                    //这里的step:n代表上一步传到这里的，可n+1往后理解一个路由步骤
                    case 1:
                        this.lineWorkUrl = 'lineWorkSurePlan';
                        break;
                    case 2:
                        this.lineWorkUrl = 'lineWorkSurePerson';
                        break;
                    case 3:
                        this.lineWorkUrl = 'lineWorkSureTool';
                        break
                    case 4:
                        this.lineWorkUrl = 'lineWorkInto';
                        break;
                    case 5:
                        this.lineWorkUrl = 'lineWorkBegin';
                        break;
                    case 6:
                        this.lineWorkUrl = 'lineWorkEnd';
                        break;
                    //缺少7作业工单忽略跳过,进入上一步的结束作业
                    case 7:
                        this.lineWorkUrl = 'lineWorkOut';
                        break;
                    //缺少7作业工单忽略跳过
                    case 8:
                        this.lineWorkUrl = 'lineWorkOut';
                        break;
                    case 9:
                        this.lineWorkUrl = 'lineWorkSureOutTool';
                        break;
                    default:
                        this.lineWorkUrl = 'lineWork';
                        break;
                }
                this.$router.push({name:this.lineWorkUrl,params: {id:id}});
            },
            //工作模式切换至线路作业
            workModeSet(){
                let lineWorkModeId = localStorage.getItem("lineWorkModeId");
                this.$api.workModeSet(lineWorkModeId).then((resp)=>{
                    if(resp.data.status ===200){
                        this.$store.commit('changeWorkModeId',lineWorkModeId);
                        this.$store.commit('changeWorkModeName',"线路作业");
                        console.log("切换至线路作业模式:"+lineWorkModeId+"成功/LineWorkComponent");
                    }else {
                        console.log("返回其他状态码,切换至线路作业模式失败/stateSet");
                    }

                }).catch((error)=>{
                    console.log(error);
                });
            },

        },
        filters: {
            ellipsis1 (value) {
                if (!value) return ''
                if (value.length > 32) {
                    return value.slice(0,32) + '...'
                }
                return value
            },
            ellipsis2 (value) {
                if (!value) return ''
                /*if (value.length > 36) {
                    return value.slice(0,36) + '...';
                }*/
                return value.slice(0,36);
            },
            showName (longName) {
                return longName.replace(/\d+/g, ' ');
            }
        },


    }
</script>

